<template>
  <div class="index" v-cloak>
    <div class="header acea-row row-center-wrapper">
      <div class="logo"><img :src="logoUrl" /></div>
      <router-link :to="'/search'" class="search acea-row row-middle">
        <span class="iconfont icon-xiazai5"></span>搜索商品
      </router-link>
    </div>
    <div class="slider-banner banner">
      <swiper :options="swiperOption" v-if="banner.length > 0">
        <swiper-slide v-for="(item, index) in banner" :key="index">
         <!-- <router-link
            :to="item.wap_url ? item.wap_url : ''"
            class="search acea-row row-middle"
          > -->
            <img :src="item.pic" />
          </router-link>
        </swiper-slide>
        <div class="swiper-pagination paginationBanner" slot="pagination"></div>
      </swiper>
    </div>
	
	<van-notice-bar
	  left-icon="volume-o"
	  :text="pmdText ? pmdText : '公告公告公告公告公告公告公告公公告公告公告公告公告公告公告公告公告'"
	/>
	
	<div class="index_menu">
		
		<div @click="index == 0 ? $router.push('/category/28') : index == 1 ? $router.push('/category/1') : $router.push('/category/6')" class="im_item" v-for="item,index in ['家具电器','数码产品','钟表珠宝','更多好物']" :key="index">
			<img v-if="index == 0" src="../../assets/images/indexmenu1.png" alt="">
			<img v-if="index == 1" src="../../assets/images/indexmenu2.png" alt="">
			<img v-if="index == 2" src="../../assets/images/indexmenu3.png" alt="">
			<img v-if="index == 3" src="../../assets/images/indexmenu4.png" alt="">
			<p>{{item}}</p>
		</div>
		
	</div>
	
	<img src="../../assets/images/xuanchuan.png" class="index_xuanchuang" alt="">
	
    <div
      class="wrapper"
      v-if="info.bastList.length > 0 || info.bastBanner.length > 0"
    >
      <div class="title acea-row row-between-wrapper">
        <div class="text">
          <div class="name line1">精品推荐</div>
          <div class="line1">{{ info.bastInfo }}</div>
        </div>
        <router-link :to="{ path: '/hot_new_goods/' + 1 }" class="more"
          >更多<span class="iconfont icon-jiantou"></span
        ></router-link>
      </div>
      <Good-list :good-list="info.bastList" :is-sort="false"></Good-list>
    </div>
	
	<div style="margin-bottom:1rem;"></div>
  </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue';
import { NoticeBar } from 'vant';
Vue.use(NoticeBar);
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "@assets/css/swiper.min.css";
import GoodList from "@components/GoodList";
import PromotionGood from "@components/PromotionGood";
import CouponWindow from "@components/CouponWindow";
import { getHomeData, getShare,pmd } from "@api/public";
import cookie from "@utils/store/cookie";
import { openShareAll } from "@libs/wechat";
import { isWeixin } from "@utils/index";

const HAS_COUPON_WINDOW = "has_coupon_window";

export default {
  name: "Index",
  components: {
    swiper,
    swiperSlide,
    GoodList,
    PromotionGood,
    CouponWindow
  },
  props: {},
  data: function() {
    return {
		//跑马灯文案
		pmdText:null,
      showCoupon: false,
      logoUrl: "",
      banner: [],
      menus: [],
      roll: [],
      activity: [],
      activityOne: {},
      info: {
        fastList: [],
        bastBanner: [],
        firstList: [],
        bastList: []
      },
      likeInfo: [],
      lovely: [],
      benefit: [],
      couponList: [],
      swiperOption: {
        pagination: {
          el: ".paginationBanner",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperRoll: {
        direction: "vertical",
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperScroll: {
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      },
      swiperBoutique: {
        pagination: {
          el: ".paginationBoutique",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperProducts: {
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      }
    };
  },
  mounted: function() {
	  this.pmd()
    let that = this;
    getHomeData().then(res => {
      that.logoUrl = res.data.logoUrl;
      that.$set(that, "banner", res.data.banner);
      that.$set(that, "menus", res.data.menus);
      that.$set(that, "roll", res.data.roll);
      that.$set(that, "activity", res.data.activity);
      if (res.data.activity.length) {
        var activityOne = res.data.activity.shift();
        that.$set(that, "activityOne", activityOne);
      }
      that.$set(that, "info", res.data.info);
      that.$set(that, "likeInfo", res.data.likeInfo);
      that.$set(
        that,
        "lovely",
        res.data.lovely.length ? res.data.lovely[0] : {}
      );
      that.$set(that, "benefit", res.data.benefit);
      that.$set(that, "couponList", res.data.couponList);
      that.setOpenShare();
      this.showCoupon =
        !cookie.has(HAS_COUPON_WINDOW) &&
        res.data.couponList.some(coupon => coupon.is_use);
    });
  },
  methods: {
	  pmd(){
		 pmd().then( (res) =>{
			 this.pmdText = res.data.info
		 })
	  },
    couponClose() {
      cookie.set(HAS_COUPON_WINDOW, 1);
    },
    setOpenShare: function() {
      if (isWeixin()) {
        getShare().then(res => {
          var data = res.data.data;
          var configAppMessage = {
            desc: data.synopsis,
            title: data.title,
            link: location.href,
            imgUrl: data.img
          };
          openShareAll(configAppMessage);
        });
      }
    }
  }
};
</script>
<style scoped lang="scss">
.index {
  background-color: #fff;
}

.index_menu{
	padding-top: .1rem;
	display: flex;
	height: 1.77rem;
	
	.im_item{
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: .26rem;
	}
	
	img{
		margin-bottom: .15rem;
		width: 1.1rem;
		height: 1.1rem;
	}
}

.index_xuanchuang{
	margin: auto;
	display: block;
	width: 6.89rem;
	margin-top: .12rem;
	margin-bottom: .2rem;
}
</style>
